<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>设置用户任务工序</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <link rel="stylesheet" href="../js/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="../style/admin.css" media="all"/>
    <link rel="stylesheet" href="../style/home.css" media="all"/>
    <script src="../js/layui/layui.js"></script>
    <style>
        .layui-form-item .layui-inline {
            padding-right: 0px;
            margin-right: 0px;
        }

        html,
        body {
            background-color: #fff;
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
            border: 0px;
        }
    </style>
</head>
<body layadmin-themealias="default">
<div class="" style="padding: 20px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-card pr20" style=" height: 440px">
            <div style="margin: 0 0 10px  0; padding:0">
                <form class="layui-form" lay-filter="projectData" action="" id="projectData">
                    <select name="projectList" id="projectList" lay-filter="projectList" lay-verify="required"
                            style="color: #0C0C0C">
                        <option
                                th:each="project : ${projectsList}"
                                th:value="${project.id}" th:text="${project.name}">
                        </option>
                    </select>
                </form>
            </div>
            <div style="margin: 0 0 10px  0; padding:0">
                <form class="layui-form" lay-filter="postData" action="" id="postData">
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="padding-left: 0">请选择任务</label>
                        <div class="layui-input-block">
                            <select name="tasks" id="tasks" lay-filter="tasks" lay-verify="required"
                                    style="color: #0C0C0C">
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <hr class="layui-border-blue">
            <div id="work-transfer"></div>
        </div>
    </div>
</div>
<script>

    layui.use(function () {
        var transfer = layui.transfer;
        var $ = layui.$;
        var form = layui.form;

        var pid = $("#projectList").val();

        var tid = "";
        var userId = '[[${userId}]]';
        var tData, tValue;

        getUserTask();

        form.render();
        form.on("select(projectList)", function (data) {
            pid = data.value;
            getUserTask();
        });

        function getUserTask() {
            let select = $('#tasks');
            select.empty();
            $.ajax({
                url: '../project/getUserProjectTask?pid=' + pid + "&userId=" + userId, //url
                dataType: 'json', //数据格式
                type: 'GET', //请求方式
                async: false, //是否异步请求
                success: function (result) {
                    if (result.code === 0) {
                        $.each(result.data, function (index, values) {
                            var option = $('<option></option>').val(values.value).text(values.title);
                            select.append(option);
                        });
                        form.render('select');
                        tid = $("#tasks").val();
                        setTransferData();
                    }
                }
            });
        }


        form.render();
        form.on("select(tasks)", function (data) {
            tid = data.value;
            setTransferData();
        });

        function getData() {
            $.ajax({
                url: '../project/getUserWorkProcedure?pid=' + pid + "&tid=" + tid + "&userId=" + userId, //url
                dataType: 'json', //数据格式
                type: 'GET', //请求方式
                async: false, //是否异步请求
                success: function (result) {
                    if (result.code === 0) {
                        tData = result.data[0];
                        tValue = result.data[1];
                    }
                }
            })
        }

        function setTransferData(d, v) {
            getData();
            transfer.render({
                elem: '#work-transfer'
                , title: ['待选择工序', '已选择工序']
                , height: 420
                , data: tData
                , value: tValue
                , id: 'selectData' //定义索引
                , onchange: function (data, index) {
                    let pData = {
                        pid: pid,
                        tid: tid,
                        userId: userId,
                        data: data,
                        action: index
                    }
                    $.ajax({
                        url: './saveUserWorkProcedure', //url
                        dataType: 'json', //数据格式
                        contentType: "application/json;charset:utf-8",
                        type: 'POST', //请求方式
                        async: false, //是否异步请求
                        data: JSON.stringify(pData),
                        success: function (result) {
                            if (result.code !== 0) {
                                getData();
                                transfer.reload('selectData', {data: tData, value: tValue});
                                parent.layer.alert(result.message, {icon: 2});
                            } else {
                                transfer.reload('selectData', {});
                            }
                        },
                        error: function () {
                            transfer.reload('work-transfer', {});
                        }
                    });
                    return false;
                }
            });
        }
    });
</script>
</body>
</html>